<template>
  <div>
    <div class="top">
      <img :src="user.headpic" alt="" />
      <div class="zl">
        <span>{{ user.uname }}</span>
        <p @click="$router.push('/my/userk')">查看或编辑个人资料</p>
      </div>
    </div>

    <div class="bottom">
      <div>
        <span>特色课</span> 
        <van-grid>
          <van-grid-item style="color: #333" icon="medal-o" text="壶铃" />
          <van-grid-item style="color: #333" icon="bar-chart-o" text="能量管" />
          <van-grid-item style="color: #333" icon="points" text="拳击课" />
          <van-grid-item style="color: #333" icon="fire-o" text="普拉提" />
        </van-grid>
        <van-cell class="four" is-link  @click="$router.push('/my/course')">
          <van-icon
            style="font-size: 18px; font-weight: 600; margin-right: 5px"
            name="friends-o"
          />
          我的课程</van-cell
        >
        <van-cell class="four" is-link>
          <van-icon
            style="font-size: 18px; font-weight: 600; margin-right: 5px"
            name="cluster-o"
          />
          我的计划</van-cell
        >
        <van-cell class="four" is-link>
          <van-icon
            style="font-size: 18px; font-weight: 600; margin-right: 5px"
            name="description"
          />
          已完成课时</van-cell
        >
        <van-cell class="four" is-link @click="$router.push('/my/setup')">
          <van-icon
            style="font-size: 18px; font-weight: 600; margin-right: 5px"
            name="revoke"
          />
          设置</van-cell
        >
      </div>
    </div>
    <van-cell class="one" is-link>
      <van-icon name="label-o" style="font-size: 16px" />
      常规课</van-cell
    >
  </div>
</template>

<script>
import httpApi from '@/http';
import { base } from "@/service";
import storage from '@/utils/Storage';

export default {
  data() {
    return {
      active: 0,
      user:[],
      base,
    };
  },
  methods: {
    
  },
  mounted(){
    httpApi.userApi.userCount({ uid: storage.get(storage.KEY_USER).uid }).then(res=>{
      console.log(res);
      this.user=res.data.data[0]
    })
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.top {
  height: 150px;
  background-color: #000;
  display: flex;
}

.bottom {
  background-color: #eee;
  height: 485px;
}

.top img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 20px;
}

.top div {
  color: #fff;
}

.zl {
  height: 60px;
  position: relative;
  top: 57px;
  left: 33px;
}

.top .zl p {
  font-size: 12px;
  margin-top: 8px;
  color: #999;
}
.top .zl span{
  color: #fff;
}

.one {
  width: 90%;
  position: relative;
  top: -500px;
  margin: 0 auto;
  z-index: 100;
  border-radius: 5px;
  height: 50px;
  text-align: center;
}
.van-grid {
  width: 90%;
  margin: auto;
  position: relative;
  top: 45px;
  border-radius: 5px;
  box-sizing: border-box;
}
.bottom > div > span {
  box-sizing: border-box;
  display: inline-block;
  width: 90%;
  padding: 15px 0px 0px 15px;
  position: relative;
  top: 45px;
  left: 19px;
  background-color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.van-tabbar-item--active {
  color: red;
}
.four {
  width: 90%;
  margin: 0 auto;
  z-index: 100;
  border-radius: 5px;
  height: 50px;
  text-align: center;
  position: relative;
  top: 55px;
  margin-bottom: 10px;
}
</style>
